<template>
	<view class="feed-back">
		<view class="custom-nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack">
				<image src="/static/back.png" mode=""></image>
			</view>
			<!-- 页面标题 -->
			<view class="nav-title">意见反馈</view>
		</view>
		<u-tabs
			:current="currentValue"
			:list="tabArr"
			lineWidth="20"
			lineColor="linear-gradient(#0079FF 0%, #1CA9FE 100%)"
			:activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}"
			:inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}"
			itemStyle="padding-left: 60px; padding-right: 60px; height: 50px;"
			:scrollable="false"
			@change="handleChange">
		</u-tabs>
		<div class="feedlist" v-if="feedList.length > 0">
			<div class="feeditem" v-for="(item,index) in feedList" :key="index" @click="toFeedDetail(item)">
				<div class="ftitle">
					<p>{{item.type_text}}</p>
					<image src="/static/mine/jiantou.png" mode="widthFix"></image>
				</div>
				<div class="feedtxt">
					<p>提交时间：<span>{{item.create_time_text}}</span></p>
					<p>意见内容：<span>{{item.content}}</span></p>
					<p>联系方式：<span>{{item.mobile}}</span></p>
				</div>
			</div>
			<u-loadmore :status="status" />
		</div>
		<div class="empty" v-else>
			<image src="/static/mine/yijian.png" mode=""></image>
			<p>没有找到任何反馈~</p>
		</div>
		<div class="fankuibutton" @click="toAddFeedback">反馈意见&建议</div>
	</view>
</template>

<script>
	import { getFeedbackList } from '@/api/mine.js'
	export default {
		data() {
			return {
				currentValue: 0,
				status: 'nomore',
				tabArr: [
					{
						name: '未回复'
					},
					{
						name: '已回复'
					}
				],
				feedList: [],
				pageData: {
					page: 1,
					status: '0',
					total: 0
				}
			}
		},
		onLoad() {
			this.getFeedbackList();
		},
		methods: {
			async getFeedbackList () {
				const res = await getFeedbackList ({page: this.pageData.page, status: this.pageData.status});
				if (res.response.statusCode === 200) {
					this.feedList = res.data.data.data;
					this.pageData.total = res.data.data.total;
				} else {
					this.feedList = [];
				}
			},
			handleChange (val) {
				// console.log(val.index, 'dddva');
				if (val.index === 0) {
					this.pageData.status = '0'
				} else if (val.index === 1) {
					this.pageData.status = '1'
				}
				this.getFeedbackList();
			},
			toAddFeedback () {
				uni.navigateTo({
					url:'/pages/mine/addFeedback'
				})
			},
			toFeedDetail (item) {
				console.log(item,  'item111');
				uni.navigateTo({
					url:'/pages/mine/feedDetail?id=' + item.id
				})
			},
			goBack() {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>

<style lang="scss" scoped>
.custom-nav-bar {
	height: 50px; /* 导航栏高度 */
	display: flex;
	align-items: center;
	color: #000;
	padding: 30px 16px 16px 16px;
}
.nav-back {
	flex: 0 0 auto;
	cursor: pointer;
	image{
		width: 12px;
		height: 24px;
		// padding-left: 16px;
	}
}
.nav-title {
	flex: 1 1 auto;
	text-align: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 17px;
	color: #000000;
}
.empty{
	width: 201px;
	margin: 100px auto 0 auto;
	text-align: center;
	image{
		width: 201px;
		height: 171px;
	}
	P{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #666666;
	}
}
.feeditem{
	width: 84%;
	padding: 16px;
	background-color: #FFFFFF;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.01);
	border-radius: 12px;
	margin: 20px auto;
	.ftitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 12px;
		border-bottom: 1px solid #EEEEEE;
		image{
			width: 18px;
			height: 16px;
		}
		p{
			font-weight: 500;
			font-size: 15px;
			color: #2F1F1A;
		}
	}
	.feedtxt{
		padding-top: 12px;
		p{
			font-weight: 400;
			font-size: 13px;
			color: #999999;
			line-height: 30px;
			span{
				font-weight: 400;
				font-size: 13px;
				color: #333333;
			}
		}
	}
}
.fankuibutton{
	width: 90%;
	height: 44px;
	background: #0095F8;
	box-shadow: 0px 2px 4px 0px rgba(0,149,248,0.5);
	border-radius: 22px;
	text-align: center;
	line-height: 44px;
	font-size: 15px;
	color: #FFFFFF;
	position: fixed;
	bottom: 50px;
	left: 5%;
}
</style>
